var flickrAlbumId = null;
var currentFlickrAlbumPage = 1;
var lastFlickrAlbumPageLoaded = 0;
var totalFlickrPages = 0;
var imagesPerPage = 6;
var imagesList;
var photoScroll;
var currentImage = 0;


/**
 * Carga la información del album que se debe mostrar en la página de fotos
 * @returns 
 */
function loadPoliticsAppAlbum() {
    var response = apiRequest("flickr.photosets.getList", {'user_id': flickrUserId});
    flickrAlbumId = null;

    if (response['errorMsg'] !== null) {
        // El comando respondio con errores
        return;
    }

    // Busca el album configurado para mostrarse
    for (i = 0; i < response['jsonObject'].photosets.total; i++) {
        //alert( response['jsonObject'].photosets.photoset[i].title._content );
        if (response['jsonObject'].photosets.photoset[i].title._content === flickrAlbumName) {
            flickrAlbumId = response['jsonObject'].photosets.photoset[i].id;
        }
    }
    if (flickrAlbumId === null) {
        throw "Album no encontrado";
        return;
    }
}

/**
 * Carga una nueva pagina de fotos
 * @returns {unresolved}
 */
function loadPhotoPage() {

    // si es la primera vez
    if (flickrAlbumId === null) {
        loadPoliticsAppAlbum();
        setUpPhotoScroller();
    }

    // Obtiene la lista de fotos del album
    response = apiRequest("flickr.photosets.getPhotos", {
        'photoset_id': flickrAlbumId, 'per_page': imagesPerPage, 'page': currentFlickrAlbumPage, 'extras': 'url_sq, url_o'});
    if (response.jsonObject === null) {
        // No hay respuesta
        return;
    }
    //alert(response.responseText);
    totalFlickrPages = response.jsonObject.photoset.pages;
    var imagesList = {};

    // recorre todas las fotos
    var i = 0;
    $("#fotos ul").html("");
    while (response['jsonObject'].photoset.photo[i] !== undefined) {
        var img = response['jsonObject'].photoset.photo[i];
        var globalIndex = (currentFlickrAlbumPage - 1) * 6 + i;
        imagesList[ globalIndex] = img;

        var aImg = $('<a href="#"></a>');
        var qImg = $("<img height='120px' widht='120px'></img>");
        qImg.attr('src', img.url_sq);
        aImg.click(function(event) {
            showPhoto(this);
            pullNextPage();
        });
        aImg.append(qImg);
        var qLi = $("<li></li>").append(aImg);
        qImg.attr('globalindex', globalIndex);
        $("#fotos ul").append(qLi);

        i++;
    }

    // Configura el paginador
    if (currentFlickrAlbumPage <= 1) {
        $("#fotos .retro").hide();
    } else {
        $("#fotos .retro").show();
    }
    if (currentFlickrAlbumPage >= totalFlickrPages) {
        $("#fotos .avanz").hide();
    } else {
        $("#fotos .avanz").show();
    }

    // evalua si se ha cargado antes la pagina y si no se ha cargado ya la
    // carga
    if (currentFlickrAlbumPage > lastFlickrAlbumPageLoaded) {
        // Pone las fotos en el visor
        var i = 0;
        while (response['jsonObject'].photoset.photo[i] !== undefined) {
            var img = response['jsonObject'].photoset.photo[i];
            var qLi = $("<li class='photo-page'></li>");
            var globalIndex = (currentFlickrAlbumPage - 1) * 6 + i;
            qLi.attr('id', 'li_photo_id' + globalIndex);

            var qImg = $("<img width=auto' height='auto'></img>");
            qImg.attr('lazysrc', img.url_o); // carga la url en un atributo que no traiga la imagen
            //qImg.attr('src', img.url_o); // carga la url en un atributo que no traiga la imagen
            qImg.attr('id', 'photo_id' + globalIndex);
            qImg.attr('height_o', img.height_o);
            qImg.attr('width_o', img.width_o);
            qLi.append(qImg);
            $("#image_list").append(qLi);
            i++;
        }
        lastFlickrAlbumPageLoaded = currentFlickrAlbumPage;
    }
}

/**
 * Abre el visor de imagen y lo ubica en la imagen seleccionada
 * @param {a} thumbNailLink link de imagen sobre la cual se hace clic
 * @returns {undefined}
 */
function showPhoto(thumbNailLink) {
    
    var qThumbNail = $(thumbNailLink).find('img');
    var globalIndex = parseInt(qThumbNail.attr('globalindex'));
    setImageSrcFromLazy(globalIndex);
    setImageSrcFromLazy(globalIndex - 2);
    setImageSrcFromLazy(globalIndex - 1);
    setImageSrcFromLazy(globalIndex - 2);
    setImageSrcFromLazy(globalIndex + 1);
    setImageSrcFromLazy(globalIndex + 2);
    currentImage = globalIndex;

    // Ajusta el visor para que se muestre en toda la pantalla
    adjustPhotoVisor()

    // Muestra el album como un dialogo sobre toda la pantalla
    $("#image_scroller_wrapper").show(0);
    photoScroll.refresh();
    photoScroll.scrollToElement('#li_photo_id' + globalIndex, 0);
}

/**
 * Ajusta el tamaño del visor de fotos al tamaño de la pantalla
 * @returns {undefined} Nada.
 */
function adjustPhotoVisor() {
    // asjuta el tamaño del visor
    $("#image_scroller_wrapper").height($(window).height());
    $("#image_scroller_wrapper").width($(window).width());

    // Obtiene la relación de aspecto
    vp_width = $("#image_scroller_wrapper").width();
    vp_height = $("#image_scroller_wrapper").height();
    lastVisorWidth = vp_width;
    rel = vp_width / vp_height;

    // Ajusta los elementos de la lista
    $('li.photo-page').width(vp_width);
    $('li.photo-page').height(vp_height);

    // Ajusta cada una de las imágenes
    $('li.photo-page img').each(function() {
        qImg = $(this);
        width_o = parseInt(qImg.attr('width_o'));
        height_o = parseInt(qImg.attr('height_o'));

        if ((width_o / height_o) > rel) {
            qImg.attr('height', 'auto');
            qImg.attr('width', '100%');
        } else {
            qImg.attr('height', '100%');
            qImg.attr('width', 'auto');
        }
    });
}

/**
 * Carga la url de la imagen del visor obteniendola del atributo srcLazy
 * @param {type} globalIndex
 * @returns {undefined}
 */
function setImageSrcFromLazy(globalIndex) {
    var lazySrc = $('#photo_id' + globalIndex).attr('lazySrc');
    $('#photo_id' + globalIndex).attr('src', lazySrc);
}

/**
 * Configura el scroller
 * @returns {undefined}
 */
function setUpPhotoScroller() {
    // Configura el scroll
    photoScroll = new iScroll('image_scroller_wrapper', {
        snap: 'li',
        momentum: false,
        hScroll: true,
        vScroll: true,
        hScrollbar: false,
        vScrollbar: false,
        onScrollEnd: function() {
            w = $(window).width();
            currentImage = -this.x / w;
            pullNextPage();

            // Carga la imagen anterior y la siguiente si no lo están
            setImageSrcFromLazy(currentImage);
            setImageSrcFromLazy(currentImage - 2);
            setImageSrcFromLazy(currentImage - 1);
            setImageSrcFromLazy(currentImage + 1);
            setImageSrcFromLazy(currentImage + 2);

        }});
    $(window).resize(function() {
        adjustPhotoVisor();
        photoScroll.scrollToElement('#li_photo_id' + currentImage, 0);
    });
}

/**
 * Avanza hacia atrás en la galeria de flickr
 * @returns {undefined}
 */
function goPrevFlickrGalleryPage() {
    if (currentFlickrAlbumPage > 1) {
        currentFlickrAlbumPage = currentFlickrAlbumPage - 1;
        loadPhotoPage();
    }
}

/**
 * Avanza hacia adelante en la galeria de flickr
 * @returns {undefined}
 */
function goNextFlickrGalleryPage() {
    if (currentFlickrAlbumPage < (totalFlickrPages)) {
        currentFlickrAlbumPage = currentFlickrAlbumPage + 1;
        loadPhotoPage();
    }
}

/**
 * apiRequest
 * @param apiCommand Comando que se va a ejecutar
 * @param paramsMap Objecto con los parámetros a enviar al api
 * @returns api command json response
 */
function apiRequest(apiCommand, paramsMap) {

    var response = {'jsonObject': null, 'errorMsg': null, 'responseText': null};

    // build url api request
    var url = "http://api.flickr.com/services/rest/?method=";
    url = url + apiCommand + "&api_key=" + flickrApiKey;
    for (var name in paramsMap) {
        url = url + "&" + name + '=' + paramsMap[name];
    }
    url = url + "&format=json&nojsoncallback=1";

    // Hace el post
    try {
        var xmlHttp = new XMLHttpRequest();
        xmlHttp.open("GET", url, false);
        xmlHttp.send(null);
    } catch (e) {
        response['errorMsg'] = 'No hay respuesta del servidor';
        return response;
    }

    // Carga el código de respuesta
    try {
        var responseStr = xmlHttp.responseText;
        response['jsonObject'] = $.parseJSON(responseStr);
        response['responseText'] = responseStr;
        //alert(responseStr);
    } catch (e) {
        response['jsonObject'] = null;
        response['errorMsg'] = 'Formato de respuesta inesperado';
        return response;
    }

    // Retorna la respuesta
    return response;
}

/**
 * Si es necesario jala la siguiente página
 * @returns {undefined}
 */
function pullNextPage() {
    // Cuando llega a la última imagen carga la siguiente pagina 
    // de imagenes

    if ((currentFlickrAlbumPage * 6 - currentImage) < 2) {
        if (currentFlickrAlbumPage < totalFlickrPages) {
            goNextFlickrGalleryPage();
            adjustPhotoVisor();
            photoScroll.refresh();
        }
    }
}

/**
 * Cierra el visor
 * @returns {undefined}
 */
function closePhotoVisor() {
    $('#image_scroller_wrapper').hide();
}
